<script setup lang="ts">
import { ref } from "vue";
import type { KnowledgeType } from "@/types/homeTypes";
import Search from "@/views/home/components/search/search.vue";
import Navs from "@/views/home/components/navs/navs.vue";
import Banner from "@/views/home/components/banner/banner.vue";
import NavBar from "@/components/lib/NavBar.vue";
import KnowledgeList from "@/views/home/components/knowledgeList/knowledgeList.vue";
import FollowDoctor from "@/views/home/components/followDoctor/followDoctor.vue";


const active = ref<KnowledgeType>("like");

</script>

<template>
    <nav-bar title="问诊首页"></nav-bar>
    <div class="home">
        <search></search>
        <navs></navs>
        <banner></banner>
        <van-tabs shrink sticky animated  swipeable v-model:active="active">
            <van-tab title="关注" name="like">
                <follow-doctor></follow-doctor>
                <knowledge-list :type="active"></knowledge-list>
            </van-tab>
            <van-tab title="推荐" name="recommend">
                <knowledge-list :type="active"></knowledge-list>
            </van-tab>
            <van-tab title="减脂" name="fatReduction">
                <knowledge-list :type="active"></knowledge-list>
            </van-tab>
            <van-tab title="饮食" name="food">
                <knowledge-list :type="active"></knowledge-list>
            </van-tab>
        </van-tabs>
    </div>
</template>

<style lang="scss" scoped>
.home {
    padding-bottom: 50px;

    :deep(.van-tabs) {
        .van-tabs__nav {
            padding: 0 0 15px 0;
        }

        .van-tabs__line {
            width: 20px;
            background-color: var(--cp-primary);
        }

        .van-tab {
            padding: 0 15px;
        }
    }
}
</style>
